<!-- 带货直播 首页装修页组件 -->
<template>
  <div id="livestreaming" :style="{ backgroundColor: datas.params.livebgcolor }">
    <van-tabs
      v-model="active"
      swipeable
      @change="getData"
      :background="datas.params.bgcolor"
      :title-active-color="datas.params.selectedcolor"
      :color="datas.params.selectedcolor"
      :title-inactive-color="datas.params.wordcolor"
    >
      <van-tab title="全部" name="0">
        <template v-if="active == 0">
          <div class="living-box">
            <ul ref="newArray1" class="zq-waterfall-left living-item">
              <li
                class=""
                v-for="(item, index) in newArray1"
                :key="index"
                @click="gotoAnchor_2(item.status, null, item.id, item.back_id)"
              >
                <div class="bg">
                  <img :src="item.cover" alt="" />
                </div>
                <div class="title">
                  <img :src="item.avatar" alt="" />
                  <span class="name">{{ item.nickname }}</span>
                </div>
                <div class="top">
                  <span class="red" :class="item.status == '4' ? 'huifan_color' : ''">{{
                    item.status == '3' ? '直播中' : item.status == '4' ? '回放' : '预告'
                  }}</span
                  ><template v-if="item.status != '2'">{{ item.view_num }}人观看</template
                  ><template v-if="item.status == '2'">
                    <!-- < :time="item.live_time" timetype="timestamp" done-text="等待开播"></> -->
                    <van-count-down :time="fun.getTimeDifference(item.live_time)" format="DD天HH时mm分ss秒" v-if="fun.getTimeDifference(item.live_time) != 0"></van-count-down>
                    <span v-else>等待开播</span>
                    </template>
                </div>
                <div class="goods_icon">
                  <i class="iconfont icon-zb_goods"></i><span>{{ item.goods_num }}</span>
                </div>
                <div class="bottom overflow1">{{ item.title }}</div>
              </li>
            </ul>
            <ul ref="newArray2" class="zq-waterfall-right living-item">
              <li
                class=""
                v-for="(item, index) in newArray2"
                :key="index"
                @click="gotoAnchor_2(item.status, null, item.id, item.back_id)"
              >
                <div class="bg">
                  <img :src="item.cover" alt="" />
                </div>
                <div class="title">
                  <img :src="item.avatar" alt="" />
                  <span class="name">{{ item.nickname }}</span>
                </div>
                <div class="top">
                  <span class="red" :class="item.status == '4' ? 'huifan_color' : ''">{{
                    item.status == '3' ? '直播中' : item.status == '4' ? '回放' : '预告'
                  }}</span
                  ><template v-if="item.status != '2'">{{ item.view_num }}人观看</template
                  ><template v-if="item.status == '2'">
                    <!-- < :time="item.live_time" timetype="timestamp" done-text="等待开播"></> -->
                    <van-count-down :time="fun.getTimeDifference(item.live_time)" format="DD天HH时mm分ss秒" v-if="fun.getTimeDifference(item.live_time) != 0"></van-count-down>
                    <span v-else>等待开播</span>
                    </template>
                </div>
                <div class="goods_icon">
                  <i class="iconfont icon-zb_goods"></i><span>{{ item.goods_num }}</span>
                </div>
                <div class="bottom overflow1">{{ item.title }}</div>
              </li>
            </ul>
          </div>
        </template>
      </van-tab>
      <van-tab title="推荐" name="1">
        <template v-if="active == 1">
          <div class="living-box">
            <ul ref="newArray1" class="zq-waterfall-left living-item">
              <li
                class=""
                v-for="(item, index) in newArray1"
                :key="index"
                @click="gotoAnchor_1(item.play_type, null, item.room_id, item.back_id)"
              >
                <div class="bg">
                  <img :src="item.cover" alt="" />
                </div>
                <div class="title">
                  <img :src="item.avatar" alt="" />
                  <span class="name">{{ item.nickname }}</span>
                </div>
                <div class="top">
                  <span class="red" :class="item.play_type == '1' ? '' : 'huifan_color'">{{
                    item.play_type == '1' ? '直播中' : '回放'
                  }}</span
                  >{{ item.view_num }}人观看
                </div>
                <div class="goods_icon">
                  <i class="iconfont icon-zb_goods"></i><span>{{ item.goods_num }}</span>
                </div>
                <div class="bottom overflow1">{{ item.title }}</div>
              </li>
            </ul>
            <ul ref="newArray2" class="zq-waterfall-right living-item">
              <li
                class=""
                v-for="(item, index) in newArray2"
                :key="index"
                @click="gotoAnchor_1(item.play_type, null, item.room_id, item.back_id)"
              >
                <div class="bg">
                  <img :src="item.cover" alt="" />
                </div>
                <div class="title">
                  <img :src="item.avatar" alt="" />
                  <span class="name">{{ item.nickname }}</span>
                </div>
                <div class="top">
                  <span class="red" :class="item.play_type == '1' ? '' : 'huifan_color'">{{
                    item.play_type == '1' ? '直播中' : '回放'
                  }}</span
                  >{{ item.view_num }}人观看
                </div>
                <div class="goods_icon">
                  <i class="iconfont icon-zb_goods"></i><span>{{ item.goods_num }}</span>
                </div>
                <div class="bottom overflow1">{{ item.title }}</div>
              </li>
            </ul>
          </div>
        </template>
      </van-tab>
      <van-tab title="直播中" name="2">
        <template v-if="active == 2">
          <div class="living-box">
            <ul ref="newArray1" class="zq-waterfall-left living-item">
              <li class="" v-for="(item, index) in newArray1" :key="index" @click="gotoAnchor(1, null, item.id)">
                <div class="bg">
                  <img :src="item.cover" alt="" />
                </div>
                <div class="title">
                  <img :src="item.avatar" alt="" />
                  <span class="name">{{ item.nickname }}</span>
                </div>
                <div class="top"><span class="red">直播中</span>{{ item.view_num }}人观看</div>
                <div class="goods_icon">
                  <i class="iconfont icon-zb_goods"></i><span>{{ item.goods_num }}</span>
                </div>
                <div class="bottom overflow1">{{ item.title }}</div>
              </li>
            </ul>
            <ul ref="newArray2" class="zq-waterfall-right living-item">
              <li class="" v-for="(item, index) in newArray2" :key="index" @click="gotoAnchor(1, null, item.id)">
                <div class="bg">
                  <img :src="item.cover" alt="" />
                </div>
                <div class="title">
                  <img :src="item.avatar" alt="" />
                  <span class="name">{{ item.nickname }}</span>
                </div>
                <div class="top"><span class="red">直播中</span>{{ item.view_num }}人观看</div>
                <div class="goods_icon">
                  <i class="iconfont icon-zb_goods"></i><span>{{ item.goods_num }}</span>
                </div>
                <div class="bottom overflow1">{{ item.title }}</div>
              </li>
            </ul>
          </div>
        </template>
      </van-tab>
      <van-tab title="预告" name="3">
        <template v-if="active == 3">
          <div class="living-box">
            <ul ref="newArray1" class="zq-waterfall-left living-item">
              <li class="" v-for="(item, index) in newArray1" :key="index" @click="gotoAnchor(2, null, item.id)">
                <img class="bg" :src="item.cover" alt="" />
                <div class="title">
                  <img :src="item.avatar" alt="" />
                  <span class="name">{{ item.nickname }}</span>
                </div>
                <div class="top">
                  <span class="red">预告</span
                  >
                  <!-- < :time="item.live_time" timetype="timestamp" done-text="等待开播"></> -->
                  <van-count-down :time="fun.getTimeDifference(item.live_time)" format="DD天HH时mm分ss秒" v-if="fun.getTimeDifference(item.live_time) != 0"></van-count-down>
                  <span v-else>等待开播</span>
                </div>
                <div class="bottom overflow1">{{ item.title }}</div>
              </li>
            </ul>
            <ul ref="newArray2" class="zq-waterfall-right living-item">
              <li class="" v-for="(item, index) in newArray2" :key="index" @click="gotoAnchor(2, null, item.id)">
                <img class="bg" :src="item.cover" alt="" />
                <div class="title">
                  <img :src="item.avatar" alt="" />
                  <span class="name">{{ item.nickname }}</span>
                </div>
                <div class="top"><span class="red">预告</span></div>
                <div class="bottom overflow1">{{ item.title }}</div>
              </li>
            </ul>
          </div>
        </template>
      </van-tab>
      <van-tab title="精彩回放" name="4" v-if="isShowBack">
        <template v-if="active == 4">
          <div class="living-box">
            <ul ref="newArray1" class="zq-waterfall-left living-item">
              <li
                class=""
                v-for="(item, index) in newArray1"
                :key="index"
                @click="gotoAnchor(3, null, item.room_id, item.id)"
              >
                <img class="bg" :src="item.cover" alt="" />
                <div class="title">
                  <img :src="item.avatar" alt="" />
                  <span class="name">{{ item.nickname }}</span>
                </div>
                <div class="top"><span class="red huifan_color">回放</span>{{ item.view_num }}人观看</div>
                <div class="goods_icon">
                  <i class="iconfont icon-zb_goods"></i><span>{{ item.goods_num }}</span>
                </div>
                <div class="bottom overflow1">{{ item.title }}</div>
              </li>
            </ul>
            <ul ref="newArray2" class="zq-waterfall-right living-item">
              <li
                class=""
                v-for="(item, index) in newArray2"
                :key="index"
                @click="gotoAnchor(3, null, item.room_id, item.id)"
              >
                <img class="bg" :src="item.cover" alt="" />
                <div class="title">
                  <img :src="item.avatar" alt="" />
                  <span class="name">{{ item.nickname }}</span>
                </div>
                <div class="top"><span class="red huifan_color">回放</span>{{ item.view_num }}人观看</div>
                <div class="goods_icon">
                  <i class="iconfont icon-zb_goods"></i><span>{{ item.goods_num }}</span>
                </div>
                <div class="bottom overflow1">{{ item.title }}</div>
              </li>
            </ul>
          </div>
        </template>
      </van-tab>
      <!-- <van-tab title="推荐">
        <template v-if="active == 0&&!fun.isTextEmpty(recordsList)">
          <div class="living-box">
            <ul ref="newArray1"
              class="zq-waterfall-left living-item">
                <li class="" v-for="(item, index) in newArray1" :key="index"  @click="gotoAnchor_1(item.play_type,null,item.room_id,item.back_id)">
                  <div class="bg">
                    <img :src="item.cover" alt="">
                  </div>
                  <div class="title">
                    <img :src="item.avatar" alt="">
                    <span class="name">{{item.nickname}}</span>
                  </div>
                  <div class="top"><span class="red" :class="item.play_type =='1'?'':'huifan_color'">{{item.play_type =='1'?"直播中":"回放"}}</span>{{item.view_num}}人观看</div>
                  <div class="goods_icon"><i class="iconfont icon-zb_goods"></i><span>{{item.goods_num}}</span></div>
                  <div class="bottom overflow1">{{item.title}}</div>
                </li>
            </ul>
            <ul ref="newArray2"
              class="zq-waterfall-right living-item">
                <li class="" v-for="(item, index) in newArray2" :key="index"  @click="gotoAnchor_1(item.play_type,null,item.room_id,item.back_id)">
                  <div class="bg">
                    <img :src="item.cover" alt="">
                  </div>
                  <div class="title">
                    <img :src="item.avatar" alt="">
                    <span class="name">{{item.nickname}}</span>
                  </div>
                  <div class="top"><span class="red" :class="item.play_type =='1'?'':'huifan_color'">{{item.play_type =='1'?"直播中":"回放"}}</span>{{item.view_num}}人观看</div>
                  <div class="goods_icon"><i class="iconfont icon-zb_goods"></i><span>{{item.goods_num}}</span></div>
                  <div class="bottom overflow1">{{item.title}}</div>
                </li>
            </ul>
          </div>
        </template>
      </van-tab>
      <van-tab title="直播中">
        <template v-if="active == 1&&!fun.isTextEmpty(recordsList)">
          <div class="living-box">
            <ul ref="newArray1"
              class="zq-waterfall-left living-item">
                <li class="" v-for="(item, index) in newArray1" :key="index" @click="gotoAnchor(1,null,item.id)">
                  <div class="bg">
                    <img :src="item.cover" alt="">
                  </div>
                  <div class="title">
                    <img :src="item.avatar" alt="">
                    <span class="name">{{item.nickname}}</span>
                  </div>
                  <div class="top"><span class="red">直播中</span>{{item.view_num}}人观看</div>
                  <div class="goods_icon"><i class="iconfont icon-zb_goods"></i><span>{{item.goods_num}}</span></div>
                  <div class="bottom overflow1">{{item.title}}</div>
                </li>
            </ul>
            <ul ref="newArray2"
              class="zq-waterfall-right living-item">
                <li class="" v-for="(item, index) in newArray2" :key="index" @click="gotoAnchor(1,null,item.id)">
                  <div class="bg">
                    <img :src="item.cover" alt="">
                  </div>
                  <div class="title">
                    <img :src="item.avatar" alt="">
                    <span class="name">{{item.nickname}}</span>
                  </div>
                  <div class="top"><span class="red">直播中</span>{{item.view_num}}人观看</div>
                  <div class="goods_icon"><i class="iconfont icon-zb_goods"></i><span>{{item.goods_num}}</span></div>
                  <div class="bottom overflow1">{{item.title}}</div>
                </li>
            </ul>
          </div>
        </template>
      </van-tab>
      <van-tab title="预告">
        <template v-if="active == 2&&!fun.isTextEmpty(recordsList)">
          <div class="living-box">
            <ul ref="newArray1"
              class="zq-waterfall-left living-item">
                <li class="" v-for="(item, index) in newArray1" :key="index" @click="gotoAnchor(2,null,item.id)">
                  <img class="bg" :src="item.cover" alt="">
                  <div class="title">
                    <img :src="item.avatar" alt="">
                    <span class="name">{{item.nickname}}</span>
                  </div>
                  <div class="top"><span class="red">预告</span></div>
                  <div class="bottom overflow1">{{item.title}}</div>
                </li>
            </ul>
            <ul ref="newArray2"
              class="zq-waterfall-right living-item">
                <li class="" v-for="(item, index) in newArray2" :key="index" @click="gotoAnchor(2,null,item.id)">
                  <img class="bg" :src="item.cover" alt="">
                  <div class="title">
                    <img :src="item.avatar" alt="">
                    <span class="name">{{item.nickname}}</span>
                  </div>
                  <div class="top"><span class="red">预告</span></div>
                  <div class="bottom overflow1">{{item.title}}</div>
                </li>
            </ul>
          </div>
        </template>
      </van-tab>
      <van-tab title="精彩回放" v-if="isShowBack">
        <template v-if="active == 3&&!fun.isTextEmpty(recordsList)">
          <div class="living-box">
            <ul ref="newArray1"
              class="zq-waterfall-left living-item">
                <li class="" v-for="(item, index) in newArray1" :key="index" @click="gotoAnchor(3,null,item.room_id,item.id)">
                  <img class="bg" :src="item.cover" alt="">
                  <div class="title">
                    <img :src="item.avatar" alt="">
                    <span class="name">{{item.nickname}}</span>
                  </div>
                  <div class="top"><span class="red huifan_color">回放</span>{{item.view_num}}人观看</div>
                  <div class="goods_icon"><i class="iconfont icon-zb_goods"></i><span>{{item.goods_num}}</span></div>
                  <div class="bottom overflow1">{{item.title}}</div>
                </li>
            </ul>
            <ul ref="newArray2"
              class="zq-waterfall-right living-item">
                <li class="" v-for="(item, index) in newArray2" :key="index" @click="gotoAnchor(3,null,item.room_id,item.id)">
                  <img class="bg" :src="item.cover" alt="">
                  <div class="title">
                    <img :src="item.avatar" alt="">
                    <span class="name">{{item.nickname}}</span>
                  </div>
                  <div class="top"><span class="red huifan_color">回放</span>{{item.view_num}}人观看</div>
                  <div class="goods_icon"><i class="iconfont icon-zb_goods"></i><span>{{item.goods_num}}</span></div>
                  <div class="bottom overflow1">{{item.title}}</div>
                </li>
            </ul>
          </div>
        </template>
      </van-tab> -->
    </van-tabs>
    <p v-if="isloading" style="padding: 2rem 0; color: #666;">加载中......</p>
    <img
      src="../../assets/images/blank.png"
      alt=""
      style="width: 5rem; margin: 2rem 0;"
      v-if="!isloading && fun.isTextEmpty(recordsList)"
    />
    <router-link v-if="!isloading" style="padding: 0 0 1rem 0; color: #999;" tag="p" :to="fun.getUrl('liveList')"
      >前往直播列表 ></router-link
    >
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  props: ['datas'],
  data() {
    return {
      active: 0,
      recordsList: [],
      newArray1: [],
      newArray2: [],
      isShowBack: true,
      //more
      isLoadMore: true,
      page: 1,
      total_page: 0,
      isloading: false //是否正在请求状态，true时为空图片不显示
    };
  },
  components: {},
  computed: {},
  mounted() {
    let _activeType = this.datas.params.type || '0';
    this.getData(_activeType.toString());
    this.getShowBack();
  },
  activated() {
    // this.getData();
    // this.getShowBack();
  },
  methods: {
    getData(name) {
      this.isloading = true;
      let _url = null;
      let _json = {};
      let that = this;
      this.recordsList = [];
      this.newArray1 = [];
      this.newArray2 = [];
      switch (name) {
      case '0':
        that.active = '0';
        _url = 'plugin.room.frontend.live-list.get-all-live-list'; //全部
        break;
      case '1':
        that.active = '1';
        _url = 'plugin.room.frontend.live-list.get-live-recommend'; //推荐
        break;
      case '2':
        that.active = '2';
        _url = 'plugin.room.frontend.live-list.get-live-list'; //直播中
        _json.status = 3;
        break;
      case '3':
        that.active = '3';
        _url = 'plugin.room.frontend.live-list.get-live-list'; //预告
        _json.status = 2;
        break;
      case '4':
        that.active = '4';
        _url = 'plugin.room.frontend.live-list.play-back'; //回放
        break;

      default:
        that.active = '-1';
        _url = 'plugin.room.frontend.live-list.get-live-concern'; //关注
        break;
      }
      $http
        .post(_url, _json, '')
        .then(response => {
          this.isloading = false;
          if (response.result === 1) {
            if (that.active == 1) {
              that.recordsList = response.data;
            } else {
              that.recordsList = response.data.data;
              // this.isLoadMore = true;
              // this.total_page = response.data.last_page;
              // if (!this.total_page) {
              //   this.total_page = 0;
              // }
            }
            if (!that.fun.isTextEmpty(that.datas.params.number)) {
              that.recordsList = that.recordsList.slice(0, that.datas.params.number);
            }
            that.sort(0, that.recordsList);
          } else {
            Toast(response.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 图片加载完回调
    getImg(url, callback, callback2) {
      let img = new Image();
      img.src = url;
      //如果图片被缓存，则直接返回缓存数据
      if (img.complete) {
        /* callback(img.width, img.height); */
        callback(img.width, img.height, Number(img.height) / Number(img.width));
      } else {
        //完全加载完毕的事件
        img.onload = function() {
          /* callback(img.width, img.height); */
          callback(img.width, img.height, Number(img.height) / Number(img.width));
        };

        img.onerror = function() {
          callback2();
        };
      }
    },
    sort(arg, list) {
      let that = this;
      let index = arg || 0;
      if (list.length > index) {
        that.getImg(
          list[index].cover,
          function(w, h, r) {
            let boxA = 0;
            let boxB = 0;

            if (document.getElementsByClassName('zq-waterfall-left')[0]) {
              boxA = document.getElementsByClassName('zq-waterfall-left')[0].clientHeight;
            }

            if (document.getElementsByClassName('zq-waterfall-right')[0]) {
              boxB = document.getElementsByClassName('zq-waterfall-right')[0].clientHeight;
            }
            if (boxA <= boxB) {
              that.newArray1.push(list[index]);
              that.$nextTick(() => {
                that.sort(index + 1, list); //加载完再递归
              });
            } else {
              that.newArray2.push(list[index]);
              that.$nextTick(() => {
                that.sort(index + 1, list);
              });
            }
          },
          function() {
            list[index].cover = 'https://www.yunzmall.com/addons/yun_shop/static/app/img/agreen_video@2x.png';
            that.$nextTick(() => {
              that.sort(index, list);
            });
          }
        );
      }
      if (list.length - 1 == index) {
        this.isLoadMore = true;
      }
    },
    getShowBack() {
      //是否开启精彩回放
      $http
        .post('plugin.room.frontend.live-list.record', {}, '')
        .then(response => {
          if (response.result === 1) {
            if (response.data.result == 1) {
              this.isShowBack = true;
            } else {
              this.isShowBack = false;
            }
          } else {
            Toast(response.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    gotoAnchor(_status, _Mid, _Rid, _backId) {
      //_status:1直播状态,_Mid：直播id,_Rid:直播间id
      if (_status == 1 && _Rid) {
        //直播中，跳转到主播间
        console.log('直播中，跳转到主播间');
        this.$router.push(this.fun.getUrl("livePage", {},{shareType:'livePlay' ,room_id: _Rid}));
      } else if (_status == 3 && _Rid && _backId) {
        //直播回放中，跳转到主播间
        console.log('直播回放中，跳转到主播间回放');
        this.$router.push(this.fun.getUrl("livePage", {},{shareType:'playBack' ,room_id: _Rid, backid: _backId}));
      } else if (_status == 0 && _Mid) {
        //我的关注 非直播状态，跳转到主播页面（个人中心）
        this.$router.push(this.fun.getUrl('anchorDetail', { id: _Mid }));
      } else if (_status == 2 && _Rid) {
        //预告页面
        this.$router.push(this.fun.getUrl('foreshow', { id: _Rid }));
      } else {
        console.log('缺少参数');
      }
    },
    gotoAnchor_1(_status, _Mid, _Rid, _backId) {
      if (_status == '1' && _Rid) {
        //直播中，跳转到主播间
        console.log('直播中，跳转到主播间');
        this.$router.push(this.fun.getUrl("livePage", {},{shareType:'livePlay' ,room_id: _Rid}));
      } else if (_status == '2' && _Rid && _backId) {
        //直播回放中，跳转到主播间
        console.log('直播回放中，跳转到主播间回放');
        this.$router.push(this.fun.getUrl("livePage", {},{shareType:'playBack' ,room_id: _Rid, backid: _backId}));
      } else {
        console.log('error::::', _status, _Mid, _Rid, _backId);
      }
    },
    gotoAnchor_2(_status, _Mid, _Rid, _backId) {
      //_status:1直播状态,_Mid：直播id,_Rid:直播间id
      if (_status == 3 && _Rid) {
        //直播中，跳转到主播间
        console.log('直播中，跳转到主播间');
        this.$router.push(this.fun.getUrl("livePage", {},{shareType:'livePlay' ,room_id: _Rid}));
      } else if (_status == 4 && _Rid && _backId) {
        //直播回放中，跳转到主播间
        console.log('直播回放中，跳转到主播间回放');
        this.$router.push(this.fun.getUrl("livePage", {},{shareType:'playBack' ,room_id: _Rid, backid: _backId}));
      } else if (_status == 2) {
        //预告页面
        Toast('直播暂未开始！');
        // this.$router.push(this.fun.getUrl("foreshow", { id: _Rid }));
      } else {
        console.log('缺少参数');
      }
    }
  }
};
</script>
<style lang="scss" scoped>
#livestreaming {
  background: #fff;

  .living-box {
    margin: 0.8rem;
  }

  .living-item {
    margin: 0;
    width: 48%;
    overflow: hidden;
    vertical-align: top;
    display: inline-block;

    li {
      margin-bottom: 0.875rem;
      position: relative;
    }

    .bg {
      width: 100%;
      // height: 13.125rem;
      border-radius: 0.313rem;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .title {
      display: flex;

      img {
        flex: 0 0 1.656rem;
        width: 1.656rem;
        height: 1.656rem;
        border-radius: 50%;
        margin-top: -0.625rem;
        border: 0.125rem solid #fff;
      }

      .name {
        display: inline-block;
        flex: 1;
        text-align: left;
        line-height: 1rem;
        margin-left: 0.25rem;
        overflow: hidden; /* 超出部分隐藏 */
        text-overflow: ellipsis; /* 超出部分显示省略号 */
        white-space: nowrap; /* 规定段落中的文本不进行换行 */
      }
    }

    .top {
      position: absolute;
      top: 0.5rem;
      left: 0.25rem;
      background-color: rgba(0, 0, 0, 0.4);
      border-radius: 0.15rem;
      color: #fff;
      padding: 0 0.15rem 0 0;
      font-size: 12px;
      height: 1.25rem;
      line-height: 1.25rem;

      .red {
        background-color: #f10303;
        border-radius: 0.15rem;
        padding: 0 0.25rem;
        margin-right: 0.2rem;
        display: inline-block;
        height: 100%;
      }

      .van-count-down {
        color: #fff;
        font-size: 12px;
      }

      .huifan_color {
        background-color: #999;
      }
    }

    .goods_icon {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      font-size: 12px;
      height: 1.25rem;
      line-height: 1.25rem;

      i {
        font-size: 1.625rem;
        color: #ffa303;
      }

      span {
        background-color: #fff;
        border-radius: 0.266rem;
        color: #f00;
        position: absolute;
        right: -4px;
        height: 0.875rem;
        line-height: 0.875rem;
        font-size: 0.625rem;
        padding: 0 0.15rem;
      }
    }

    .bottom {
      width: 100%;
      height: 2.5rem;
      line-height: 1.25rem;
      position: absolute;
      bottom: 1.875rem;
      left: 0;
      font-weight: bold;
      font-size: 0.875rem;
      color: #fff;
      text-align: left;
      padding: 0 0.5rem;
      // background: rgba(0, 0, 0, 0.4);
    }

    .overflow1 {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .purple {
      position: absolute;
      top: 0.5rem;
      left: 0.5rem;
      color: #fff;
      font-size: 12px;
      background-color: #8415f5;
      border-radius: 0.625rem 0 0.625rem 0;
      padding: 0.2rem 0.6rem;
    }

    .gray {
      position: absolute;
      top: 0.5rem;
      left: 0.5rem;
      color: #fff;
      font-size: 12px;
      background-color: #999;
      border-radius: 0.625rem 0 0.625rem 0;
      padding: 0.2rem 0.6rem;
    }
  }

  .zq-waterfall-left {
    margin-right: 0.5rem;
  }
}
</style>
